import React, { useState, useEffect, useRef, useMemo } from 'react';
import Taro, { useDidShow, SocketTask } from '@tarojs/taro';
import { View, Input, Text, LivePlayer, Video, RichText, ScrollView } from '@tarojs/components'
import ChatRoom from './../ChatRoom';
const renderChatRoom = (props) => {
  const { renderStyle, renderSelf, messages = [], goodsType, goodsId, session, socketFalg, connect } = props
  useEffect(() => {
    scrollToBottom()
  }, [messages])
  const scrollToBottom = () => {
    const query = Taro.createSelectorQuery()
    query.select('#scrollInfo').boundingClientRect().exec((val) => {
      const [res] = val
      console.log(res)
      if (res) {
        Taro.pageScrollTo({
          scrollTop: res.bottom,
          duration: 300,
          selector: '#scrollInfo',
          offsetTop: res.bottom,
          success: () => {
            console.log('移动成功')
          }
        })
      }
    })
  };
  const memo = useMemo(() => {
    if (renderStyle !== 'default' && renderSelf === 'sp') {
      return <View id={'scrollInfo'} className="liveInteraction_content liveInteraction_content_sp" >
        {renderStyle === 'default' && <View className="liveInteraction_live_desc">
          系统提示:直播内容及互动评论均严禁传播违法或不良负面信息，如有违反，平台将采取封禁措施。直播初请各位耐心等待，直播期间如遇问题请联系班主任讲师。
        </View>}
        <View className="liveInteraction_socket">
          {messages.map((item, index) => {
            return <ChatRoom hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>;
          })}
          <View className='liveInteraction_content_height'></View>
        </View>
      </View>
    } else if (renderStyle !== 'default' && renderSelf === 'hp') {
      return <View id={'scrollInfo'} className="liveInteraction_content liveInteraction_content_hp" >
        <View className="liveInteraction_live_desc">
          系统提示:直播内容及互动评论均严禁传播违法或不良负面信息，如有违反，平台将采取封禁措施。直播初请各位耐心等待，直播期间如遇问题请联系班主任讲师。
        </View>
        <View className="liveInteraction_socket">
          {messages.map((item, index) => {
            return <ChatRoom hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>;
          })}
          <View className='liveInteraction_content_height'></View>
        </View>
      </View>
    } else {
      return <View id={'scrollInfo'} className="liveInteraction_content">
        <View className="liveInteraction_live_desc">
          系统提示:直播内容及互动评论均严禁传播违法或不良负面信息，如有违反，平台将采取封禁措施。直播初请各位耐心等待，直播期间如遇问题请联系班主任讲师。
        </View>
        {messages.map((item, index) => {
          return <ChatRoom hpFlag={renderStyle === 'qp' && renderSelf === 'hp' ? '1' : '0'} renderStyle={renderStyle} formData={{ fromGoodsType: goodsType, fromGoodsId: goodsId }} session={session} item={item}></ChatRoom>;
        })}
        <View className='liveInteraction_content_height'></View>
      </View>
    }
  }, [renderStyle, renderSelf, messages, goodsType, goodsId, session, socketFalg])
  return memo

}
export default renderChatRoom